<template>
	<view>
		<view class="weather-info" v-if="tomorrowWeather">
			<view>日期:{{tomorrowWeather.date}}</view>
			<view>星期:{{tomorrowWeather.week}}</view>
			<view>最高温:{{tomorrowWeather.high}}℃</view>
			<view>最低温:{{tomorrowWeather.low}}℃</view>
		</view>
		<view>
			<button @click="getWeather()" mode="aspectFill">获取明日天气预报</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tomorrowWeather: null
			}
		},
		methods: {
			getWeather() {
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					success: (res) => {
						console.log("success------" + JSON.stringify(res));
						const tomorrow = res.data.data.forecast[1];
						this.tomorrowWeather = {
							date: tomorrow.date,
							week: tomorrow.week,
							high: tomorrow.high.replace('℃', ''),
							low: tomorrow.low.replace('℃', '')
						}
					},
					fail: (eMsg) => {
						console.log('请求天气失败-----' + eMsg);
					}
				});
			}
		}
	};
</script>

<style>
	.weather-info {
		margin-top: 20rpx;
		text-align: center;
		box-shadow: 0 2px 4px rgba(1, 0.5, 0.4, 0.4);
		border-radius: 10px;
		padding: 20px;
	}

	.weather-loading {
		margin-top: 20rpx;
		color: #999;
	}
</style>